<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

    <title>订单查询</title>
    <!-- 引入样式文件 -->
    <!-- <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" /> -->
    <link href="https://cdn.bootcdn.net/ajax/libs/vant/2.12.27/index.min.css" rel="stylesheet">


    <style type="text/css">
        html {
            background: #f5f5f5;
            height: 100vh;
            width: 100vw;
        }

        #app {

            /*padding: 0 0;*/
        }

        .van-cell {
            background: #fff;
            align-items: center;
        }

        .content {
            padding: 10px;
        }

        .info {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 10px 0;
        }

        .top {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .item {
            margin-bottom: 10px;
            background: #fff;
            padding: 15px;
            border-radius: 10px;
        }

        .nodata {
            width: 100%;
            text-align: center;
            margin-top: 30px;
        }
    </style>

    <!-- 引入 Vue 和 Vant 的 JS 文件 -->
    <!-- <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script> -->
    <!-- <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.6/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vant/2.12.27/vant.min.js"></script>

    <script src="./static/js/axios.min.js"></script>


</head>

<body>
    <div id="app">
        <van-sticky>
            <div class="ipt" style="background:#fff;">
                <van-field v-model="mobile" label="手机号" placeholder="请输入查询手机号">
                    <template #button>
                        <van-button size="small" type="primary" @click="search">搜索</van-button>
                    </template>
                </van-field>
            </div>
        </van-sticky>
        <div class="content">
            <!--查询结果-->
            <div class="item" v-for="(item,index) in list" :key="item.id">
                <p style="border-bottom:1px solid #dbdbdb;padding-bottom:5px;">订单编号：{{item.order_sn}} </p>
                <div class="top">
                    <span>{{getOrderStatus(item.order_status)}}</span>
                    <span style="color:#f00">¥{{item.price}}</span>
                </div>
                <div class="info">
                    <img :src="item.img" style="width:100px;height:100px;margin-right:10px" alt="" />
                    <div class="desc" style="flex:1">
                        <div>{{item.product_name}}</div>
                        <div>充值号码：{{item.mobile}} 【{{item.area_name}}】</div>
                        <div>充值面值：{{item.face_value}}</div>

                    </div>
                </div>
                <div>下单时间：{{item.created_at}}</div>
            </div>
            <div class="nodata" v-if="list.length==0">
                暂无记录
            </div>
        </div>
    </div>



    <script>
        // 在 #app 标签下渲染一个按钮组件
        new Vue({
            el: '#app',

            data: {
                mobile: "",
                list: []
            },
            methods: {
                getOrderStatus(order_status) {
                    if (order_status == 3) {
                        return "充值成功"
                    } else if (order_status == 4) {
                        return "充值失败"
                    } else {
                        return "充值中"
                    }
                },
                search() {

                    if (!this.mobile) {
                        vant.Toast('请输入手机号');
                        return
                    }
                    if (!this.mobile.length) {
                        vant.Toast('请输入正确的手机号');
                        return
                    }
                    const config = {
                        url: "https://ty.hfcz888.net/api/getYcList",
                        method: "get",
                        params: {
                            mobile: this.mobile
                        }
                    }
                    axios(config).then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            this.list = res.data.data
                        } else {
                            vant.Toast(res.data.msg);
                        }
                    })
                }
            }

        });

        // 调用函数组件，弹出一个 Toast
        // vant.Toast('提示');

        // 通过 CDN 引入时不会自动注册 Lazyload 组件
        // 可以通过下面的方式手动注册
        Vue.use(vant.Lazyload);
    </script>
</body>

</html>